<template>
  <div class="careful">
    <div class="matter">
      <div class="matter-img">
        <img src="/src/assets/knowledge-element/no-find.png" alt="点津问道标品">
      </div>
      <div class="matter-content">
        <div class="content-title">注意事项</div>
        <div class="content-tip"><img src="/src/assets/knowledge-element/01.png" alt="点津问道标品" width="30"><p>每个科目可以有多个知识元模板，可以联系管理员添加新模板，未创建模板按系统默认模板。</p></div>
        <div class="content-tip"><img src="/src/assets/knowledge-element/02.png" alt="点津问道标品" width="30"><p>每个知识元中支持创建多个知识元【兼容小练习和知识点讲解功能】。</p></div>
        <div class="content-tip"><img src="/src/assets/knowledge-element/03.png" alt="点津问道标品" width="30"><p>新建后一旦被教师或教研老师使用到备课或讲义中，无法删除文档。</p></div>
      </div>
    </div>
    <div class="no-data"><p>暂无数据,可以按以下流程</p>
    <!-- <el-button type="primary" @click="add">新建知识元</el-button> -->
    </div>
    <div class="order">
      <div><img src="/src/assets/knowledge-element/mould.png" alt="点津问道标品"><p>1.选择模板</p></div>
      <div class="box"><img src="/src/assets/knowledge-element/next.png" alt="点津问道标品"><div></div></div>
      <div><img src="/src/assets/knowledge-element/knowledge.png" alt="点津问道标品"><p>2.添加知识点</p></div>
      <div class="box"><img src="/src/assets/knowledge-element/next.png" alt="点津问道标品"><div></div></div>
      <div><img src="/src/assets/knowledge-element/text.png" alt="点津问道标品"><p>3.添加题目,文字</p></div>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted } from 'vue';
import AddDialog from "./../components/add-dialog.vue";
import { modal, emitter } from '$';

export default {
  setup() {
    let selectData = []
    onMounted(() => {
      emitter.on('knowledge-selected', (e) => { selectData = e })
    })

    const add = () => {  
      modal.create({ 
        title: '新建知识元',
        width: 640,
        zIndex:998,
        component: AddDialog,
        props: { selectData },
      })
    }
    return { add }
  } 
}
</script>

<style lang="scss" scoped>
  .careful {
    .matter {
      width: 100%;
      background: #F5F7FA;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      padding: 15px 25px;
      &-content {
        margin-left: 50px;
        .content-title {
          font-weight: 500;
          font-size: 18px;
          height: 25px;
          line-height: 25px;
        }
        .content-tip {
          display: flex;
          margin-top: 15px;
          align-items: center;
          img {
            height: 30px;
            margin-right: 10px;
          }
          p {
            display: flex;
          }
        }
      }
    }
    .no-data {
      margin-top: 65px;
      margin-bottom: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 20px;
        font-weight: 500;
        margin-right: 10px;
      }
      .el-button{
        border-radius: 6px;
        padding: 8px 15px;
      }
    }
    .order {
      width: 100%;
      background: #F5F7FA;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      padding: 25px 25px;
      .box { 
        display: flex;
        align-items: center;
        position: relative;
        margin: 0 -10px 30px;
        &>div {
          width: 200px;
          height: 7px;
          background: #D1D4E6;
        }
        img{
          position: absolute;
          left: 50%;
          top: 50%;
          display: inline-block;
          margin-top: -10px;
          margin-left: 30px;
        }
      }
      p {
        text-align: center;
        margin-top: 10px;
      }
    }
    .button {
      margin-top: 50px;
      .el-button {
        padding: 10px 30px;
        font-size: 16px;
      }
    }
  }
   @media only screen and (max-width: 1280px) {
    .careful{
      .order{
        .box{
          &>div {
            width: 80px;
            height: 7px;
            background: #D1D4E6;
          }
          img{
            position: absolute;
            left: 50%;
            top: 50%;
            display: inline-block;
            margin-top: -10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>